<template>
  <div>
    <div style="margin-left: 30px;margin-top: 30px">
      <el-page-header @back="goBack" content="充值中心" style="color: #00afff">
      </el-page-header>
    </div>

    <div style="width: 80%;margin-left: 110px;margin-top: 40px">
      <el-descriptions title="基本信息" direction="vertical" :column="4" border>
        <el-descriptions-item label="用户名">{{userData.accountName}}</el-descriptions-item>
        <el-descriptions-item label="卡号">{{userData.accountCardNumber}}</el-descriptions-item>
        <el-descriptions-item label="手机号" :span="2">{{userData.accountPhone}}</el-descriptions-item>
        <el-descriptions-item label="卡上余额">
          {{userData.cardBalance}}
        </el-descriptions-item>
      </el-descriptions>
    </div>

    <div style="width: 80%;margin-left: 110px;margin-top: 40px;">
      <b>选择金额</b>
    </div>
    <div style="margin-left: 110px;margin-top: 30px" v-for="item in moneyChoose">
        <el-radio v-model="ylPayModel.total_amount" :label="item1" v-for="item1 in item" border></el-radio>
    </div>

    <div style="width: 80%;margin-left: 110px;margin-top: 40px;">
      <b>选择支付方式</b>
    </div>
    <div style="width: 80%;margin-left: 110px;margin-top: 40px;">
      <span>
          <el-radio v-model="ylPayModel.payType" :label="item.id" v-for="item in payTypeList">
          <img :src="item.src" height="45px" width="150px">
          </el-radio>
      </span>
      <span style="margin-left: 100px">
         <el-button type="primary" @click="pay">立即支付</el-button>
        <div id="payForm" v-show="false"></div>
      </span>
    </div>
  </div>
</template>

<script>

import request from "@/utils/request";

export default {
  created() {
    request.get('/ylsystem/frontaccount/'+sessionStorage.getItem("useId"))
      // 支付宝支付
      .then(res=> {
        this.userData=res.data
        this.ylPayModel.ylFrontAccount=res.data
      })
  },
  data() {
    return {

      userData:{
        accountName:'',
        accountPhone:"",
        accountCardNumber:"",
        cardBalance:"",
        accountId:""
      },

      ylPayModel:{
        total_amount:"",
        payType:"",
        subject:"医疗卡充值",
        ylFrontAccount:""
      },

      moneyChoose:{
        group:[100,200,300,400],
        group2:[500,600,700,800]
      },
      payTypeList: [
        {
          id: 0,
          src: 'https://gw.alipayobjects.com/zos/bmw-prod/f466695f-f426-4e79-ae69-ecdf64a03c71.svg'
        },
        {
          id: 1,
          src: 'https://wx.gtimg.com/pay/img/common/logo.svg?v=20190327'
        },
      ],
    }
  },
  methods: {
    goBack() {
      console.log('go back');
    },
    pay() {
      if(this.ylPayModel.payType==0){
        this.ylPayModel.payType="支付宝"
        request.post('/pay/paymanagement/aliRechargePay',this.ylPayModel)
        // 支付宝支付
        .then(res=>{
          document.querySelector('#payForm').innerHTML = res.data
          this.$nextTick(() => {
            document.forms[0].submit()
          })
        })
      }else  {
        this.$message({
          message: '暂未开通微信支付,请选择其他方式',
          type: 'warning'
        });
      }
    }
    }
}
</script>



